    <style include="settings-shared md-select clear-storage-dialog-shared">
      cr-dialog div[slot=title] {
          line-height: 20px;
      }

      #sort {
        align-items: center;
        display: flex;
        margin: 0 var(--cr-icon-button-margin-start);
        margin-bottom: 8px;
        padding: 0 var(--cr-section-padding);
      }

      #sortMethod {
        margin-inline-start: 1em;
      }

      /* There is only one top-level heading for All Sites, so remove the
       * additional leading padding used for lists. */
      .list-frame.without-heading {
        padding-inline-start: var(--cr-section-padding);
      }

      #clearAllContainer {
        align-items: center;
        display: flex;
        height: var(--cr-section-two-line-min-height);
        justify-content: space-between;
        margin: 0 var(--cr-icon-button-margin-start);
        padding-inline-end: var(--cr-section-padding);
        padding-inline-start: var(--cr-section-padding);
      }
    </style>
    <div id="sort">
      <label id="sortLabel">$i18n{siteSettingsAllSitesSort}</label>
      <select id="sortMethod" class="md-select" aria-labelledby="sortLabel"
        on-change="onSortMethodChanged_">
        <option value="[[sortMethods_.MOST_VISITED]]">
          $i18n{siteSettingsAllSitesSortMethodMostVisited}
        </option>
        <option value="[[sortMethods_.STORAGE]]">
          $i18n{siteSettingsAllSitesSortMethodStorage}
        </option>
        <option value="[[sortMethods_.NAME]]">
          $i18n{siteSettingsAllSitesSortMethodName}
        </option>
      </select>
    </div>
    <div id="clearAllContainer">
      <div id="clearLabel">
        $i18n{siteSettingsClearAllStorageDescription} [[totalUsage_]]
      </div>
      <div id="clearAllButton">
        <cr-button type="button" on-click="onConfirmClearAllData_">
          $i18n{siteSettingsClearAllStorageLabel}
        </cr-button>
      </div>
    </div>
    <div class="list-frame" hidden$="[[!siteGroupMapEmpty_(siteGroupMap)]]">
      <div class="list-item secondary">$i18n{emptyAllSitesPage}</div>
    </div>
    <div class="list-frame" hidden$="[[!noSearchResultFound_(filteredList_)]]">
      <div class="list-item secondary">$i18n{noSitesFound}</div>
    </div>
    <div class="list-frame without-heading" id="listContainer">
      <iron-list id="allSitesList"
          items="[[filteredList_]]"
          scroll-target="[[subpageScrollTarget]]">
        <template>
          <site-entry site-group="[[item]]" list-index="[[index]]"
              iron-list-tab-index="[[tabIndex]]"
              focus-row-index="[[index]]"
              tabindex$="[[tabIndex]]"
              last-focused="{{lastFocused_}}"
              list-blurred="{{listBlurred_}}"
              sort-method="[[sortMethod_]]">
          </site-entry>
        </template>
      </iron-list>
    </div>

    <!-- Overflow menu. -->
    <cr-lazy-render id="menu">
      <template>
        <cr-action-menu role-description="$i18n{menu}">
          <button hidden$="[[actionMenuModel_.isPartitioned]]"
              class="dropdown-item" role="menuitem"
              on-click="onConfirmResetSettings_">
            $i18n{siteSettingsSiteGroupReset}
          </button>
          <button class="dropdown-item" role="menuitem"
              on-click="onConfirmClearData_">
            $i18n{siteSettingsSiteGroupDelete}
          </button>
        </cr-action-menu>
      </template>
    </cr-lazy-render>

    <!-- Confirm reset settings dialog. -->
    <cr-lazy-render id="confirmResetSettings">
      <template>
        <cr-dialog close-text="$i18n{close}">
          <div slot="title">
            $i18n{siteSettingsSiteGroupResetDialogTitle}
          </div>
          <div slot="body">
            [[getResetPermissionsLabel_(actionMenuModel_)]]
          </div>
          <div slot="button-container">
            <cr-button class="cancel-button" on-click="onCloseDialog_">
              $i18n{cancel}
            </cr-button>
            <cr-button class="action-button" on-click="onResetSettings_">
              $i18n{siteSettingsSiteResetAll}
            </cr-button>
          </div>
        </cr-dialog>
      </template>
    </cr-lazy-render>

    <!-- Confirm clear data dialog. -->
    <cr-lazy-render id="confirmClearData">
      <template>
        <cr-dialog close-text="$i18n{close}">
          <div slot="title">
            $i18n{siteSettingsSiteGroupDeleteDialogTitle}
          </div>
          <div slot="body">
            [[getClearDataLabel_(actionMenuModel_)]]
            <div class="detail-list">
              <div class="detail">
                <iron-icon icon="all-sites:logout"></iron-icon>
                [[getLogoutLabel_()]]
              </div>
              <div class="detail">
                <iron-icon icon="all-sites:offline"></iron-icon>
                $i18n{siteSettingsSiteGroupDeleteOfflineData}
              </div>
            </div>
          </div>
          <div slot="button-container">
            <cr-button class="cancel-button" on-click="onCloseDialog_">
              $i18n{cancel}
            </cr-button>
            <cr-button class="action-button" on-click="onClearData_">
              $i18n{siteSettingsSiteClearStorage}
            </cr-button>
          </div>
        </cr-dialog>
      </template>
    </cr-lazy-render>

    <!-- Confirm remove site dialog. -->
    <cr-lazy-render id="confirmRemoveSite">
      <template>
        <cr-dialog close-text="$i18n{close}">
          <div id="removeSiteTitle" slot="title">
            [[getRemoveSiteTitle_(actionMenuModel_)]]
          </div>
          <div slot="body">
            <div id="logoutBulletPoint" class="detail">
              <iron-icon icon="all-sites:logout"></iron-icon>
              [[getRemoveSiteLogoutBulletPoint_(actionMenuModel_)]]
            </div>
            <div class="detail">
              <iron-icon icon="all-sites:offline"></iron-icon>
              $i18n{siteSettingsRemoveSiteOfflineData}
            </div>
            <div id="permissionsBulletPoint" class="detail"
              hidden$="[[!showPermissionsBulletPoint_(actionMenuModel_)]]">
              <iron-icon icon="settings:permissions"></iron-icon>
              $i18n{siteSettingsRemoveSitePermissions}
            </div>
          </div>
          <div slot="button-container">
            <cr-button class="cancel-button" on-click="onCloseDialog_">
              $i18n{cancel}
            </cr-button>
            <cr-button class="action-button" on-click="onConfirmRemoveSite_">
              $i18n{siteSettingsRemoveSiteConfirm}
            </cr-button>
          </div>
        </cr-dialog>
      </template>
    </cr-lazy-render>

    <!-- Confirm clear all data dialog. -->
    <cr-lazy-render id="confirmClearAllData">
      <template>
        <cr-dialog close-text="$i18n{close}">
          <div slot="title">
            $i18n{siteSettingsClearAllStorageDialogTitle}
          </div>
          <div slot="body">
            <div>[[getClearAllDataLabel_(totalUsage_)]]</div>
            <div class="detail-list">
              <div class="detail">
                <iron-icon icon="all-sites:logout"></iron-icon>
                $i18n{siteSettingsClearAllStorageSignOut}
              </div>
              <div class="detail">
                <iron-icon icon="all-sites:offline"></iron-icon>
                $i18n{siteSettingsSiteGroupDeleteOfflineData}
              </div>
            </div>
          </div>
          <div slot="button-container">
            <cr-button class="cancel-button" on-click="onCloseDialog_">
              $i18n{cancel}
            </cr-button>
            <cr-button class="action-button" on-click="onClearAllData_">
              $i18n{siteSettingsSiteClearStorage}
            </cr-button>
          </div>
        </cr-dialog>
      </template>
    </cr-lazy-render>
